<template>
  <div class="deployment-plan-detail">
    <el-main  v-if="infoShowContainer">
      <div class="plan-detail-container">
        <div class="plan-detail-item plan-detail-left">
          <div class="detail-item-container left-item-container boederSet">
            <div class="titleHeader"><span>节奏规划(</span><span v-text="activeNameSwitch"></span><span>)</span></div>
            <div class="plan-detail-left-container">
              <div class="cadence-itemSet" v-for="(item,index) in cadenceItems" :key="index"
                   :class="{activeSet:trialSaleSearch.activityId == item.activityId}" @click="mineActiveSwitch(item)">
                <div class="cadence-item cadence-item-left">
                  <span class="circleNormal" :style="{background: item.color}"></span>
                </div>
                <div class="cadence-item cadence-item-center">
                  <div style="margin-bottom: 6px;">
                    <span v-text="item.startTime"></span><span>至</span><span v-text="item.endTime"></span>
                  </div>
                  <div style="word-wrap: break-word;word-break: break-all;font-weight: bold" v-text="item.activityTheme"></div>
                </div>
                <div class="cadence-item cadence-item-right" style="font-weight: bold" v-text="item.stageName"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="plan-detail-item plan-detail-right">
          <div class="detail-item-container titleFont">
            <el-tabs type="border-card" v-model="activeNameSwitch">
              <el-tab-pane v-if="activeShowItem"  key="2018" label="试销" name="试销">
                <div class="memorandumSaleHeader flex-container space-between">
                  <div class="memorandumSaleHeaderItem">
                    <el-radio-group size="small" v-model="radioMemorandumSale">
                      <el-radio-button label="部署明细"></el-radio-button>
                      <el-radio-button label="数据分析"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="memorandumSaleHeaderItem">
                    <el-button style="font-weight: bold;width: 165px;" @click="createSaleDetail" size="small" type="primary" icon="el-icon-plus">新建试销点计划</el-button>
                  </div>
                </div>
                <div class="memorandumSaleContent">
                  <div class="memorandumSaleItem memorandumSaleDatail" v-if="radioMemorandumSale == '部署明细'">
                    <div class="dumSaleDatail dumSaleDatailSearch flex-container space-between">
                      <div class="dumSaleDatailSearchContainer">
                        <el-form :inline="true" :model="trialSaleSearch" class="mineSetForm demo-form-inline" size="small">
                          <el-form-item label="地区">
                            <el-select class="selectFont" style="width: 120px;" v-model="trialSaleSearch.region" @change="setRegionChange" placeholder="区域">
                              <el-option class="selectFont"  v-for="(item, index) in memorSetSearch.region" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                            <el-select class="selectFont"  style="width: 120px;" v-model="trialSaleSearch.province" @change="setProvinceChange" placeholder="省份">
                              <el-option  class="selectFont" v-for="(item, index) in memorSetSearch.province" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                            <el-select class="selectFont"  style="width: 120px;" v-model="trialSaleSearch.city" @change="setCityChange" placeholder="城市">
                              <el-option  class="selectFont" v-for="(item, index) in memorSetSearch.city" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="试销状态">
                            <el-select class="selectFont"  style="width: 120px;" v-model="trialSaleSearch.status" placeholder="试销状态">
                              <el-option class="selectFont"  label="全部" value="全部"></el-option>
                              <el-option  class="selectFont" label="已完成" value="1"></el-option>
                              <el-option class="selectFont"  label="试销中" value="0"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                    <div class="dumSaleDatail el-table-container" style="width: 100%">
                      <el-table :data="memorandumSale" border stripe
                                class="setHeightMini" style="width: 100%;">
                        <el-table-column
                          type="index"
                          label="编号"
                          width="60">
                        </el-table-column>
                        <el-table-column
                          label="地区&城市"
                          width="180">
                          <template slot-scope="scope">
                            <span v-text="scope.row.province"></span>
                            <span>-</span>
                            <span v-text="scope.row.city"></span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="trialSalePointName"
                          label="名称"
                          width="160">
                        </el-table-column>
                        <el-table-column
                          prop="planSales"
                          label="预计销量(件)"
                          width="120">
                        </el-table-column>
                        <el-table-column
                          prop="saleCountFinishRatioString"
                          sortable
                          label="销量完成度"
                          width="120">
                        </el-table-column>
                        <el-table-column
                          width="200"
                          prop="duration"
                          label="起止时间">
                          <template slot-scope="scope">
                            <span>{{scope.row.startTime}}</span>
                            <span>至</span>
                            <span>{{scope.row.endTime}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="状态"
                          width="80">
                          <template slot-scope="scope">
                            <span :style="{'color':scope.row.status == 1 ? '#05c459' : '#a3ce0c' }">{{scope.row.status == 1 ? '已完成' : '试销中'}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          min-width="210"
                          label="操作">
                          <template slot-scope="scope">
                            <div style="display: flex;width: 100%;">
                              <el-button @click="handleToDatailClick(scope.row)" type="text" size="small">详情</el-button>
                              <el-button @click="handleToPushClick(scope.row)" type="text" size="small">推送</el-button>
                              <el-button v-if="scope.row.status == 1" @click="handleSummatyClick(scope.row.trialSalePointId)" type="text" size="small">查看总结</el-button>
                              <el-button type="text" @click="handleSaleDelete(scope.row.trialSalePointId,scope.$index,memorandumSale)" size="small">删除</el-button>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                  <div class="memorandumSaleItem memorandumSaleAnalysis" v-else>
                    <simple-analyse :simpleMeta.sync="saleThisMeta"></simple-analyse>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane v-if="activeShowItem"  key="2019" label="出样" name="出样">
                <div class="newSetContainer">
                  <el-button style="font-weight: bold" type="primary" size="mini" @click="createSimpleSet">
                    <i class="el-icon-plus"></i><span style="margin-left: 6px;font-weight: bold">创建出样部署</span>
                  </el-button>
                </div>
                <div class="el-table-container">
                  <el-table :data="sampleSendData" border stripe
                            class="setHeight" style="width: 100%">
                    <el-table-column prop="createTime" label="创建日期" width="115">
                    </el-table-column>
                    <el-table-column prop="sampleName" label="出样名称" width="210">
                    </el-table-column>
                    <el-table-column prop="cityNumber" label="出样城市数量(个)" width="145">
                    </el-table-column>
                    <el-table-column prop="shopNumber" label="出样门店数量(个)" width="145">
                    </el-table-column>
                    <el-table-column prop="userLiable" label="负责人" width="260">
                    </el-table-column>
                    <el-table-column label="操作" width="115">
                      <template slot-scope="scope">
                        <el-button @click="handleSimpleDetail(scope.row)" type="text" size="small">查看详情</el-button>
                        <el-button @click="handleSimpleDelete(scope.row.sampleSendId,scope.$index,sampleSendData)" type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane v-if="!activeShowItem" key="2020" label="培训" name="培训">
                <div class="newSetContainer">
                  <el-button type="primary" style="font-weight: bold" size="mini" @click="createTrainSet">
                    <i class="el-icon-plus"></i><span style="margin-left: 6px;">创建培训部署</span>
                  </el-button>
                </div>
                <div class="el-table-container">
                  <el-table :data="trainSendData" border stripe
                            class="setHeight" style="width: 100%">
                    <el-table-column prop="createTime" label="创建日期" width="120">
                    </el-table-column>
                    <el-table-column prop="trainTheme" label="培训主题" width="560">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button @click="handleToTrainDetail(scope.row)" type="text" size="small">查看详情</el-button>
                        <el-button @click="handleToTrainEdit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleToTrainDelete(scope.row.trainId, scope.row.$index, trainSendData)" type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane v-if="!activeShowItem" key="2021" label="物料" name="物料">
                <div class="newSetContainer">
                  <el-button @click="createMaterialSet" style="font-weight: bold" type="primary" size="mini">
                    <i class="el-icon-plus"></i><span style="margin-left: 6px;">创建物料部署</span>
                  </el-button>
                </div>
                <div class="el-table-container">
                  <el-table :data="prodMaterial" border stripe
                            class="setHeight" style="width: 100%">
                    <el-table-column prop="createTime" label="创建日期" width="120">
                    </el-table-column>
                    <el-table-column prop="informationTitle" label="物料标题" width="560">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button @click="handleToMaterialDetail(scope.row)" type="text" size="small">查看详情</el-button>
                        <el-button @click="handleToMaterialEdit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleToMaterialDelete(scope.row.informationId,scope.$index,prodMaterial)" type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane v-if="!activeShowItem" key="2022" label="地推"  name="地推">
                <div class="newSetContainer">
                  <el-button type="primary" size="mini" style="font-weight: bold" @click="createExtensionVisible">
                    <i class="el-icon-plus"></i><span style="margin-left: 6px;">创建地推部署</span>
                  </el-button>
                </div>
                <div class="el-table-container">
                  <el-table :data="prodExtension" border stripe
                            class="setHeight" style="width: 100%">
                    <el-table-column prop="createTime" label="创建日期" width="120">
                    </el-table-column>
                    <el-table-column prop="extensionName" label="活动名称" width="560">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button @click="handleCampaignClick(scope.row)" type="text" size="small">查看详情</el-button>
                        <el-button @click="handleCampaignEdit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleCampaignDelete(scope.row.extensionId,scope.$index,prodExtension)" type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <!--  Dialog容器  -->
      <div class="dialog-container">
        <!--  试销Dialog创建  -->
        <div class="sale-dialog-contain">
          <el-dialog title="新建试销" class="mineSetDialog dialogHeaderFont"
                     :visible.sync="createSaleDialogVisible" width="50%" top="8vh">
            <div class="sale-dialog-container">
              <div class="createSaleBody whiteContainer boederSet paddingSet lineHeight">
                <div class="createSaleItem flex-container">
                  <div class="descLleft">名称</div>
                  <div class="paramRight">
                    <el-input v-model="createParamSale.trialSalePointName" style="width: 70%;" size="small" placeholder="请输入名称"></el-input>
                  </div>
                </div>
                <div class="createSaleItem flex-container">
                  <div class="descLleft">区域</div>
                  <div class="paramRight mineSetForm" style="height: 30px;margin: 0px;">
                    <el-form :inline="true" :model="createParamSale" class="demo-form-inline" size="small">
                      <el-form-item>
                        <el-select v-model="createParamSale.region"  @change="changeDisrictRegion" placeholder="地区" style="width: 120px;">
                          <el-option v-for="(item, index) in createDistrict.region" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-select v-model="createParamSale.province" @change="changeDisrictProv"  placeholder="省份" style="width: 150px;">
                          <el-option v-for="(item, index) in createDistrict.province" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-select v-model="createParamSale.city" placeholder="城市" style="width: 180px;">
                          <el-option v-for="(item, index) in createDistrict.city" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <div class="createSaleItem flex-container">
                  <div class="descLleft">预期销量</div>
                  <div class="paramRight">
                    <el-input v-model="createParamSale.planSales" style="width: 70%;" :min="0" type="number" size="small" placeholder="请输入预期销量"></el-input>
                  </div>
                </div>
                <div class="createSaleItem flex-container">
                  <div class="descLleft">预期流量</div>
                  <div class="paramRight">
                    <el-input v-model="createParamSale.planFlowt" style="width: 70%;" :min="0" type="number" size="small" placeholder="请输入预期流量"></el-input>
                  </div>
                </div>
                <div class="createSaleItem flex-container">
                  <div class="descLleft">时间段</div>
                  <div class="paramRight">
                    <el-date-picker size="small" value-format="yyyy-MM-dd" range-separator="至"
                                    v-model="createParamSale.createParamTime" type="daterange"
                                    :picker-options="pickerOptionLimit"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                  </div>
                </div>
                <!--<div class="createSaleItem flex-container" style="align-items: flex-start;">
                  <div class="descLleft">试销物料</div>
                  <div class="paramRight">
                    <div class="saleMineSet">
                      <div class="saleMineSetItem">
                        <div class="saleMineItemSet flex-container" >
                          <div class="salePoint" style="width: 82px;padding-right: 12px;text-align: center;">卖点</div>
                          <el-input size="small"  v-model="createParamSale.planFlowt" placeholder="卖点"></el-input>
                        </div>
                      </div>
                      <div class="saleMineSetItem" style="display:flex;flex-direction: column;">
                        <div class="saleMineItemSet flex-container" >
                          <div class="salePointWord" style="width: 82px;padding-right: 12px;text-align: center;">话术</div>
                          <el-input size="small"  v-model="createParamSale.planFlowt" placeholder="话术"></el-input>
                        </div>
                      </div>
                      <div class="saleMineSetItem">
                        <el-button size="small" type="primary" plain>添加话术</el-button>
                      </div>
                    </div>
                  </div>
                </div>-->
              </div>
              <div class="createSaleFooter">
                <div class="createSaleButton">
                  <el-button style="width: 100px;" @click="createSaleBody(createParamSale)" size="small" type="primary" plain>确 定</el-button>
                  <el-button style="width: 100px;" @click="createSaleDialogVisible = false" size="small" plain>取 消</el-button>
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  试销Dialog详情  -->
        <sale-detail :trialSalePoint.sync="trialSalePointParam" :showdialog.sync="detailDialogVisible"></sale-detail>
        <!--  总结Dialog查看  -->
        <div class="summary-dialog-contain">
          <el-dialog
            class="mineSetDialog dialogHeaderFont"
            title="总结"
            :visible.sync="summaryDialogVisible"
            width="60%"
            top="8vh">
            <div class="summary-dialog-content whiteContainer paddingSet boederSet lineHeight">
              <div class="summaryContainer">
                <div class="summaryLeft">完成度:</div>
                <div class="summaryRight" v-text="salePointSummary.finishRatioString">
                </div>
              </div>
              <div class="summaryContainer">
                <div class="summaryLeft">完成度分析:</div>
                <div class="summaryRight" v-text="salePointSummary.completionAnalysis"></div>
              </div>
              <div class="summaryContainer">
                <div class="summaryLeft">物料分析:</div>
                <div class="summaryRight" v-text="salePointSummary.materielAnalysis"></div>
              </div>
              <div class="summaryContainer">
                <div class="summaryLeft">问题总结:</div>
                <div class="summaryRight" v-text="salePointSummary.summary"></div>
              </div>
              <div class="summaryContainer">
                <div class="summaryLeft">建议:</div>
                <div class="summaryRight" v-text="salePointSummary.suggestion">
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  新建出样活动Dialog  -->
        <div class="createTrain-dialog-contain">
          <el-dialog title="添加出样" class="mineSetDialog dialogHeaderFont"
                     :visible.sync="createSimpleDialogVisible"
                     width="50%" top="8vh">
            <div class="createSimple-dialog-content whiteContainer paddingSet boederSet lineHeight">
              <div class="createSimpleItem">
                <div>标题名称</div>
                <el-input v-model="simpleSaleSet.sampleName" placeholder="请输入标题名称" size="small"></el-input>
              </div>
              <div class="createSimpleItem" style="margin-top: 6px;">
                <div>责任人</div>
                <el-select v-model="simpleSaleSet.userLiable" filterable remote
                           size="small" reserve-keyword placeholder="输入关键词"
                           :remote-method="remoteMethod" :loading="loading">
                  <el-option v-for="item in leadOfficialSet"
                             :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="createSimple-dialog-footer">
              <el-button style="width: 180px;" size="small" @click="saveSimpleSale(simpleSaleSet)" type="primary">保 存</el-button>
            </div>
          </el-dialog>
        </div>
        <!--  出样Dialog详情  -->
        <div class="sample-dialog-contain">
          <el-dialog title="出样详情" class="mineSetDialog dialogHeaderFont"
                     :visible.sync="sampleDialogVisible"
                     width="70%" top="8vh">
            <div class="sample-dialog-content whiteContainer paddingSet boederSet lineHeight">
              <div class="sample-dialog-item sample-dialog-header">
                <div class="sample-header-item sample-headerTitle">
                  <el-input size="small" placeholder="输入出样名称" v-model="simpleDetail.sampleName" @blur="simpleNameEdit(simpleDetail)">
                  </el-input>
                  <div class="mineIconSet">
                    <i class="el-icon-edit-outline"></i>
                  </div>
                </div>
                <div class="sample-header-item">
                  <el-button @click="createCitySimpleThis(simpleDetail.sampleSendId)" icon="el-icon-plus" type="primary" plain size="mini">添加新的城市</el-button>
                </div>
              </div>
              <div class="sample-dialog-item">
                <el-table :data="simpleDetail.citySimpleList"
                          border stripe class="setHeight boederSet">
                  <el-table-column prop="city" label="出样城市" width="140">
                  </el-table-column>
                  <el-table-column prop="sampleShopCount" label="出样门店数量" width="120">
                  </el-table-column>
                  <el-table-column label="出样进度计划" style="display: flex;" width="460">
                    <template slot-scope="scope">
                      <div style="display: inline-block;width: 50%;padding: 0px 6px 0px 0px;" v-for="(item,index) in scope.row.tSampleSendPlanData" :key="index">
                        <div style="display: flex;">
                          <div v-text="item.dateTime" style="min-width: 85px;"></div>
                          <div><span v-text="item.sampleShopCount"></span><span>家</span></div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                      <el-button @click="handleCityEditSend(scope.row)" type="text" size="small">编辑</el-button>
                      <el-button @click="handleCityDeleteSend(scope.row.samplePlanId,scope.$index,simpleDetail.citySimpleList)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-dialog>
          <el-dialog class="mineSetDialog dialogHeaderFont" :title="sendCityTitle"
                     :visible.sync="dialogSimpleVisible" width="40%" append-to-body>
            <div class="createCitySimple paddingSet whiteContainer boederSet lineHeight">
              <div class="createCitySimpleItem">
                <div class="citySimpleIte citySimpleLeft" style="font-weight:bold;">选择城市</div>
                <div class="citySimpleIte">
                  <el-select size="small" v-model="createCitySimple.city" placeholder="选择城市" style="font-weight:bold;">
                    <el-option v-for="(item, index) in cityItems"
                               :key="index" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="createCitySimpleItem">
                <div class="citySimpleIte citySimpleLeft" style="font-weight:bold;">出样门店数量</div>
                <div class="citySimpleIte">
                  <el-input v-model="createCitySimple.sampleShopCount"  size="small" :min="0" type="number" placeholder="输入数量" style="font-weight:bold;"></el-input>
              </div>
              </div>
              <div class="createCitySimpleItem space-between">
                <div class="citySimpleIte citySimpleLeft" style="font-weight:bold;">计划进度日期</div>
                <div class="citySimpleIte">
                  <el-button @click="createPlanCitySet({ dateTime:'', sampleShopCount: ''})" type="primary" icon="el-icon-plus" plain size="small" style="font-weight:bold;">添加计划</el-button>
                </div>
              </div>
              <div class="createCitySimpleItem" style="flex-direction: column">
                <div class="tSampleSendPlan" v-for="(item,index) in createCitySimple.tSampleSendPlanData" :key="index">
                  <div class="tSampleSendPlanItem tSampleSendPlanTime">
                    <el-date-picker v-model="item.dateTime" size="small" type="date" style="width: 150px;font-weight:bold;"
                                    value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  <div class="tSampleSendPlanItem tSampleSendPlanNum" style="margin-left: 12px;font-weight:bold;">
                    <el-input v-model="item.sampleShopCount"  size="small" :min="0" type="number" placeholder="输入数量" style="font-weight:bold;"></el-input>
                  </div>
                </div>
              </div>
            </div>
            <div class="createCityFooter">
              <div class="cityFooter">
                <el-button style="width: 100px;font-weight:bold;"  size="mini" @click="createCitySimpleSQL(createCitySimple)" type="primary">保 存</el-button>
                <el-button style="width: 100px;font-weight:bold;" size="mini" @click="dialogSimpleVisible = false" type="info">取 消</el-button>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  培训Dialog创建  -->
        <div class="createTrain-dialog-contain">
          <el-dialog :title="trainSendTitle" class="mineSetDialog dialogHeaderFont"
                     :visible.sync="createTrainDialogVisible"
                     width="60%" top="8vh">
            <div class="createTrain-dialog-content">
              <div class="createTrain-item-content trainBascInfo whiteContainer paddingSet" style="border-radius: 5px;">
                <div class="trainBascInfoItem">
                  <div class="bascInfoItem bascInfoItemLeft">培训主题</div>
                  <div class="bascInfoItem bascInfoItemRight">
                    <el-input style="width: 60%;font-weight:bold" size="small" v-model="trainSetParam.trainTheme" placeholder="输入培训主题"></el-input>
                  </div>
                </div>
                <div class="trainBascInfoItem" style="padding-top: 12px;">
                  <div class="bascInfoItem bascInfoItemLeft">培训目标</div>
                  <div class="bascInfoItem bascInfoItemRight">
                    <el-input style="width: 60%;font-weight:bold" size="small" v-model="trainSetParam.trainTarget" placeholder="输入培训目标"></el-input>
                  </div>
                </div>
              </div>
              <div class="createTrain-item-content deptSetContainer">
                <div class="deptSetItem flex-container deptSetHeader space-between" style="margin: 6px 0;">
                  <div style="font-weight:bold">选择培训部门及录入备注</div>
                  <div>
                    <el-button style="font-weight:bold" @click="createTrainToDept" type="primary" plain size="mini" icon="el-icon-plus">添加部门</el-button>
                  </div>
                </div>
                <div class="deptSetBody whiteContainer" style="border-radius: 5px;font-weight:bold">
                  <div class="deptSetItem deptSetItemContainer" v-for="(item,index) in trainSetParam.tTrainDepartmentData" :key="index">
                    <div class="deptSetItemPart" style="flex: 2;max-width: 20%;justify-content: center;font-weight:bold">
                      <span v-text="item.trainDepartment"></span>
                    </div>
                    <div class="deptSetItemPart" style="flex: 7;max-width: 70%;font-weight:bold">
                      <span v-text="item.trainNote"></span>
                    </div>
                    <div class="deptSetItemPart" style="flex: 1;max-width: 10%;justify-content: center;font-weight:bold">
                      <el-button style="padding: 0;height: 35px;font-weight:bold;" type="text" @click="delDeptSetPart(item, index, trainSetParam.tTrainDepartmentData)">删除</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="createTrain-item-content trainInfoTime">
                <div class="trainInfoTimeItem flex-container trainInfoHeader space-between" style="margin: 6px 0;font-weight:bold">
                  <div style="font-weight:bold">培训时间及责任人</div>
                  <div>
                    <el-button type="primary" plain size="mini" icon="el-icon-plus"
                               @click="createTimeAndPerson({startTime: '', projectName: '', userLiable: '' })"  style="font-weight:bold">添加</el-button>
                  </div>
                </div>
                <div class="trainInfoTimeItem trainInfoContainer">
                  <div class="titleHeader">
                    <div class="titleHeaderItem" style="flex: 2;max-width: 20%;font-weight:bold">时间</div>
                    <div class="titleHeaderItem" style="flex: 4;max-width: 40%;font-weight:bold">项目</div>
                    <div class="titleHeaderItem" style="flex: 3;max-width: 30%;font-weight:bold">责任人</div>
                    <div class="titleHeaderHandler">操作</div>
                  </div>
                  <div class="trainInfoContentItem whiteContainer" v-for="(item, index) in trainSetParam.tTrainDetailData"
                       :key="index" style="display: flex;">
                    <div class="contentItem" style="flex: 2;max-width: 20%;height: 50px;font-weight:bold">
                      <el-date-picker v-model="item.startTime" type="date" size="small"
                        value-format="yyyy-MM-dd" placeholder="选择日期">
                      </el-date-picker>
                    </div>
                    <div class="contentItem" style="flex: 4;max-width: 40%;height: 50px;font-weight:bold">
                      <el-input size="small" v-model="item.projectName" placeholder="输入项目名称"></el-input>
                    </div>
                    <div class="contentItem" style="flex: 3;max-width: 30%;height: 50px;font-weight:bold">
                      <el-select style="width: 100%;font-weight:bold" v-model="item.userLiable" filterable
                                 remote size="small" reserve-keyword placeholder="输入关键词"
                                 :remote-method="remoteMethod" :loading="loading">
                        <el-option v-for="item in leadOfficialSet" :key="item.value"
                                   :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="contentItemHandler">
                      <el-button type="text" @click="delTrainInfo(item, index, trainSetParam.tTrainDetailData)" style="font-weight:bold">删除</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="createTrain-item-content trainCourse">
                <div class="trainCourseItem flex-container trainCourseHeader space-between" style="margin: 6px 0;">
                  <div style="font-weight:bold">培训课件</div>
                </div>
                <div class="trainCourseItem">
                  <div class="setCourseHeader">
                    <div class="courseHeaderItem" style="flex: 1;font-weight:bold">视频</div>
                    <div class="courseHeaderItem" style="flex: 2;font-weight:bold">PPT、PDF、WORD</div>
                  </div>
                  <div class="setCourseBody">
                    <div class="courseHeaderItem" style="flex: 1;">
                      <el-upload class="mineSetUpStyle" action="/file/uploadFile" multiple
                                 :limit="5" accept="video/*" :data="dataSetParam" :on-success="handleSuccessVideo"
                                 :on-preview="handleVideoPreview" :before-remove="resoureRemoveBefore"
                                 :on-remove="handleResoureRemoveFile" :file-list="trainSetParam.videoFileList">
                        <el-button size="small" type="primary"  style="font-weight:bold">点击上传</el-button>
                      </el-upload>
                    </div>
                    <div class="courseHeaderItem" style="flex: 2;">
                      <el-upload class="mineSetUpStyle" action="/file/uploadFile" :data="dataSetParam"
                                 accept=".pdf,.docx,.dotx,.doc,.ppt,.dot,.txt,.xlsx,.xls" :on-preview="handleWordPreview"
                                 :on-success="handleSuccessWord" :before-remove="resoureRemoveBefore"
                                 :on-remove="handleResoureRemoveFile" :file-list="trainSetParam.wordFileList">
                        <el-button size="small" type="primary"  style="font-weight:bold">点击上传</el-button>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="createTrainFooter" style="padding-top: 12px;">
              <el-button style="width: 160px;font-weight:bold" @click="updateTrainSet(trainSetParam)" size="small" type="primary">保 存</el-button>
            </div>
          </el-dialog>
          <el-dialog title="添加部门" class="mineSetDialog dialogHeaderFont"
                     :visible.sync="createTrainDeptVisible" width="50%" top="8vh">
            <div class="createDept-dialog-content whiteContainer boederSet paddingSet">
              <div class="createDeptItem mineTreeSet">
                <el-tree accordion ref="deptRefSet" :data="renderOrganization"
                         show-checkbox node-key="id" @check="deptRefChange" :props="defaultProps">
                </el-tree>
              </div>
            </div>
            <div class="createDeptItem createDeptNote">
              <div style="line-height: 40px;">备注信息</div>
              <div>
                <el-input size="small" v-model="noteInfo.noteInfoText" placeholder="输入备注信息"></el-input>
              </div>
            </div>
            <div class="createDept-dialog-footer">
              <div class="createDept-footer space-between" style="width: 50%;">
                <el-button style="width: 100px;font-weight:bold" @click="sureTrainToDept" size="small" type="primary" plain>确 定</el-button>
                <el-button style="width: 100px;font-weight:bold" @click="createTrainDeptVisible = false" size="small" plain>取 消</el-button>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  培训Dialog详情  -->
        <div class="train-dialog-contain">
          <el-dialog title="培训详情" class="mineSetDialog dialogHeaderFont"
                     :visible.sync="trainDialogVisible" width="60%" top="8vh">
            <div class="train-dialog-content lineHeight">
              <div class="train-dialog-item whiteContainer paddingSet boederSet train-dialog-header">
                <div class="train-header-item">
                  <div class="train-header-itemLeft">培训主题:</div>
                  <div class="train-header-itemRight" v-text="trainDetailSend.trainTheme"></div>
                </div>
                <div class="train-header-item">
                  <div class="train-header-itemLeft">培训目标:</div>
                  <div class="train-header-itemRight" v-text="trainDetailSend.trainTarget"></div>
                </div>
                <div class="train-header-item trainDeptSet">
                  <div class="trainDeptSetItem" v-for="(item,index) in trainDetailSend.tTrainDepartmentData" :key="index">
                    <div class="trainDeptSetLeft">
                      <span class="train-header-itemLeft" style="display: inline-block;">培训部门:</span><span style="font-weight:bold" v-text="item.trainDepartment"></span>
                    </div>
                    <div class="trainDeptSetRight" v-text="item.trainNote" style="text-indent: 25px;font-weight:bold">
                    </div>
                  </div>
                </div>
              </div>
              <div class="train-dialog-item" style="margin: 12px 0px;">
                <div class="train-rest-item">培训时间及责任人</div>
                <div class="train-rest-item trainDetailHeader">
                  <div class="titleSetItem" style="flex: 2;max-width: 20%;">时间</div>
                  <div class="titleSetItem" style="flex: 4;max-width: 40%;">项目</div>
                  <div class="titleSetItem" style="flex: 4;max-width: 40%;">责任人</div>
                </div>
                <div class="train-rest-item tTrainDetailContainer">
                  <div class="tTrainDetailItem" v-for="(item,index) in trainDetailSend.tTrainDetailData" :key="index">
                    <div class="titleSetItem" style="flex: 2;max-width: 20%;" v-text="item.startTime"></div>
                    <div class="titleSetItem" style="flex: 4;max-width: 40%;" v-text="item.projectName"></div>
                    <div class="titleSetItem" style="flex: 4;max-width: 40%;" v-text="item.userLiable"></div>
                  </div>
                </div>
              </div>
              <div class="train-dialog-item">
                <div class="train-rest-item">培训课件</div>
                <div class="train-rest-item trainCourseItem">
                  <div class="setCourseHeader">
                    <div class="courseHeaderItem" style="flex: 1;">视频</div>
                    <div class="courseHeaderItem" style="flex: 2;">PPT、PDF、WORD</div>
                  </div>
                  <div class="setCourseBody">
                    <div class="courseHeaderItem" style="flex: 1;max-width: 33.4%;">
                      <div class="sourceItem" v-for="(item,index) in trainDetailSend.videoFileList" :key="index">
                        <span style="padding-right: 4px;">
                          <img src="src\images\marketSale\videoSet.png" alt="">
                        </span>
                        <a target="_blank" :href="item.url" v-text="item.name"></a>
                      </div>
                    </div>
                    <div class="courseHeaderItem" style="flex: 2;max-width: 66.6%;">
                      <div class="sourceItem" v-for="(item,index) in trainDetailSend.wordFileList" :key="index">
                         <span style="padding-right: 4px;">
                          <img src="src\images\marketSale\word.png" alt="">
                        </span>
                        <a target="_blank" :href="item.url" v-text="item.name">
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  营销物料Dialog详情  -->
        <div class="materials-dialog-contain">
          <el-dialog title="物料详情" class="mineSetDialog dialogHeaderFont" :visible.sync="materialsDialogVisible" width="60%">
            <div class="materials-dialog-content whiteContainer paddingSet boederSet lineHeight">
              <div class="flex-container">
                <div class="textLeft">营销物料标题:</div>
                <div class="textRight widthSet flex-container" v-text="materialDetail.informationTitle" style="font-weight:bold;color:#333">
                </div>
              </div>
              <div class="uploadResource">
                <div class="textLeft">营销物料图片或视频</div>
                <div v-if="materialDetail.fileData">
                  <el-show-mine :on-preview="handleCargPreview" :file-list="materialDetail.fileData" ></el-show-mine>
                  <el-dialog class="dialogHeaderFont" :visible.sync="dialogDetailVisible" width="30%" append-to-body>
                    <img v-if="dialogImageShow == 0" width="100%" :src="dialogImageUrl" alt="物料图片">
                    <video ref="videoSet" v-else controls autoplay style="width: 100%;" :src="dialogImageUrl">您的浏览器不支持 video 标签</video>
                  </el-dialog>
                </div>
                <div v-else>
                  <span class="textLeft">暂未上传资源</span>
                </div>
              </div>
              <div class="h5Rource">
                <div class="textLeft">H5网页链接:</div>
                <div class="textLeft" v-text="materialDetail.siteUrl ? materialDetail.siteUrl : '暂未填写'"></div>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  营销物料Dialog创建  -->
        <div class="materials-dialog-create">
          <el-dialog :title="sendMaterTitle" class="mineSetDialog dialogHeaderFont" :visible.sync="materialsCreateVisible" width="60%">
            <div class="materials-dialog-content whiteContainer paddingSet boederSet lineHeight">
              <div class="materialsCreateItem flex-container">
                <div class="textLeft">营销物料标题:</div>
                <div class="textRight widthSet flex-container">
                  <el-input v-model="materialSend.informationTitle" placeholder="输入营销物料标题" size="small" maxlength="60" style="font-weight:bold"></el-input>
                </div>
              </div>
              <div class="materialsCreateItem uploadResource">
                <div class="textLeft">上传营销物料图片或视频</div>
                <div>
                  <el-upload class="mineSetStyle" action="/file/uploadFile" list-type="picture-card" :data="dataSetParam"
                             :file-list="fileUploadList" :on-preview="handlePictureCardPreview"
                             :on-success="handleSuccessThis" :limit="8" :on-remove="handleRemoveFile"
                             accept="video/*,image/*" ref="uploadSetMine" :before-remove="handleRemoveBefore"
                             :headers="headersSet">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog class="dialogHeaderFont" :visible.sync="imgVideoDialogVisible" width="30%" append-to-body>
                    <img v-if="dialogImageShow == 0" width="100%" :src="dialogImageUrl" alt="物料图片">
                    <video ref="videoSetMine" v-else controls autoplay style="width: 100%;height: 360px;" :src="dialogImageUrl">您的浏览器不支持 video 标签</video>
                  </el-dialog>
                </div>
              </div>
              <div class="materialsCreateItem h5Rource">
                <div class="textLeft">H5网页链接:</div>
                <div class="textLeft">
                  <el-input v-model="materialSend.siteUrl" placeholder="输入H5网页链接" size="small" maxlength="50"></el-input>
                </div>
              </div>
            </div>
            <div class="materialsCreateFooter">
              <el-button @click="updateMaterSend(materialSend)" style="width: 160px;font-weight:bold;" size="small" type="primary">保 存</el-button>
            </div>
          </el-dialog>
        </div>
        <!--  地推Dialog详情  -->
        <div class="campaign-dialog-contain">
          <el-dialog class="mineSetDialog dialogHeaderFont" title="活动详情" :visible.sync="campaignDialogVisible" width="60%" top="8vh">
            <div class="campaign-dialog-content whiteContainer paddingSet boederSet lineHeight">
              <div class="campaign-dialog-item campaign-content">
                <div class="campaign-content-item">
                  <div class="campaigTitle campaigTitleLeft">
                    活动标题:
                  </div>
                  <div class="campaigTitle campaigTitleRight" v-text="getExtDetail.extensionName">
                  </div>
                </div>
                <div class="campaign-content-item">
                  <div class="campaigTitle campaigTitleLeft">
                    关联节奏活动:
                  </div>
                  <div class="campaigTitle campaigTitleRight" v-text="getExtDetail.activityTheme">
                  </div>
                </div>
                <div class="campaign-content-item">
                  <div class="campaigTitle campaigTitleLeft">
                    活动地点:
                  </div>
                  <div class="campaigTitle campaigTitleRight" v-text="getExtDetail.extensionPoint">
                  </div>
                </div>
                <div class="campaign-content-item">
                  <div class="campaigTitle campaigTitleLeft">
                    活动时间:
                  </div>
                  <div class="campaigTitle campaigTitleRight" style="flex-direction: column;">
                    <div v-for="(item,index) in getExtDetail.tExtensionScheduleList" :key="index">
                      <span>{{getDateString(item.extensionDate)}}</span>
                      <span v-text="item.description"></span>
                    </div>
                  </div>
                </div>
                <div class="campaign-content-item">
                  <div class="campaigTitle campaigTitleLeft">
                    活动形式:
                  </div>
                  <div class="campaigTitle campaigTitleRight" style="flex-direction: column;">
                    <div v-for="(item,index) in getExtDetail.tExtensionFormList">
                      <span v-text="item.form"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
        <!--  地推Dialog新建  -->
        <div class="campaign-dialog-create">
          <el-dialog
            class="mineSetDialog dialogHeaderFont"
            :title="extenSendTitle"
            :visible.sync="extensionVisible"
            width="60%"
            top="8vh">
            <div class="campaign-create-container whiteContainer paddingSet boederSet lineHeight">
              <div class="campaign-create-item">
                <div class="campaign-create-part">活动名称</div>
                <div class="campaign-create-part">
                  <el-input v-model="extensionData.extensionName" placeholder="输入活动名称" size="small"></el-input>
                </div>
              </div>
              <div class="campaign-create-item">
                <div class="campaign-create-part">活动概述</div>
                <div class="campaign-create-part">
                  <el-input v-model="extensionData.extensionDescription" placeholder="输入活动相关概述" size="small"></el-input>
                </div>
              </div>
              <div class="campaign-create-item">
                <div class="campaign-create-part">活动地点</div>
                <div class="campaign-create-part">
                  <el-input v-model="extensionData.extensionPoint" placeholder="输入活动地点" size="small"></el-input>
                </div>
              </div>
              <div class="campaign-create-item">
                <div class="campaign-create-part tExtensionSchHeader">
                  <div style="margin-right: 12px;">活动时间</div>
                  <div @click="createExtSchedule({ extensionDate: '',description: ''})"><i class="el-icon-plus"></i></div>
                </div>
                <div class="campaign-create-part tExtensionSchedule" v-for="(item,index) in extensionData.tExtensionScheduleList" :key="index">
                  <div class="tExtensionSchItem">
                      <el-date-picker
                      v-model="item.extensionDate"
                      type="date"
                      size="small"
                      value-format="yyyy-MM-dd"
                      placeholder="输入活动时间">
                    </el-date-picker>
                  </div>
                  <div class="tExtensionSchItem">
                    <el-input style="width:80%;" v-model="item.description" placeholder="输入备注" size="small"></el-input>
                  </div>
                </div>
              </div>
              <div class="campaign-create-item">
                <div class="campaign-create-part tExtensionFormHeader">
                  <div style="margin-right: 12px;">活动形式</div>
                  <div @click="createExtForm({ form: ''})"><i class="el-icon-plus"></i></div>
                </div>
                <div class="campaign-create-part" v-for="(item,index) in extensionData.tExtensionFormList" :key="index">
                  <el-input v-model="item.form" placeholder="输入活动形式描述" size="small"></el-input>
                </div>
              </div>
            </div>
            <div class="campaign-create-footer">
              <el-button style="width: 180px;" size="small" @click="saveExtensionSale(extensionData)" type="primary">保 存</el-button>
            </div>
          </el-dialog>
        </div>
        <!--  推送Dialog  -->
        <push-dialog :sale-point-info="salePointInfoSet"  :showdialog.sync="pushDialogTableVisible"></push-dialog>
      </div>
    </el-main>
  </div>
</template>

<script>
  import SimpleAnalyse from './compentSet/SimpleAnalyse'
  import SaleDetail from './compentSet/SaleDetail'
  import PushDialog from './compentSet/pushDialog'
  import ElShowMine from 'router/marketSale/compentSet/ElShowMine/el-show-mine'
  import { mapGetters, mapMutations } from 'vuex'
  import * as opreate from 'api/getData'
  import { districtSolve, districtDeploySolve } from 'utils/mUtils'
  import { CreateParamSale, CreateExtension, CreateSimpleCity } from 'api/controlConst'
  import { treeSolveUpdate, treeSolveDis, isTrueReg } from 'utils/mUtils'

  export default {
    name: "deployment-plan-detail",
    data(){
      return {
        productIdSet: '',
        stageSetLimit: [],
        cityItems: [],
        empSimpleAllInfo:[],
        headersSet: {
          dipsToken: sessionStorage.getItem("tokenName")
        },
        dataSetParam:{
          type: 'Video'
        },
        activeShowItem: true,
        activeNameSwitch: '试销',
        noteInfo:{
          activeSetDept: '',
          noteInfoText: ''
        },
        extenSendTitle: '新的活动',
        sendCityTitle: '添加新的城市',
        sendMaterTitle: '添加营销物料',
        trainSendTitle: '新的培训活动',
        infoShowContainer: false,
        radioMemorandumSale: '部署明细',
        trialSalePointParam: { },
        saleThisMeta: { activitySummary: {}, buyingcCrowdsAnalysList: [], feedbackNumList: [], tTrialSalePointData: [] },
        cadenceItems: [],
        radioSwitchSummaty: '0',
        memorandumSale:[],
        fileUploadList: [],
        createTrainParam:{},
        trialSaleSearch: { activityId: '', region: '全部', province: '全部', city: '全部', status: '全部' },
        memorSetSearch:{ region: [], province: [], city: [] },
        createDistrict:{ "region": [], "province":[], city: [] },
        createParamSale: new CreateParamSale(),
        leadOfficialSet: [],
        simpleSaleSet:{ sampleName: '', userLiable: '' },
        getExtDetail: {},
        extensionData: new CreateExtension(),
        trainSetParam:{
          trainTheme: '',
          trainTarget: '',
          tTrainDepartmentData: [],
          tTrainDetailData: [],
          tTrainCoursewareData: [],
          videoFileList: [],
          wordFileList: []
        },
        materialSend: {
          informationTitle: '',
          siteUrl: '',
          fileData: []
        },
        showVideo: 'http://ossyd.chiq-cloud.com/dips/img/defaultVideoPicture.png',
        salePointInfoSet: {},
        materialDetail: {},
        sampleSendData: [],
        trainSendData: [],
        prodMaterial: [],
        trainDetailSend: {},
        prodExtension: [],
        dialogImageUrl: '',
        salePointSummary: {},
        simpleDetail:{ sampleSendId: '', activityId: '', sampleName: '', citySimpleList: [] },
        defaultProps: { children: 'children', label: 'label' },
        createCitySimple: new CreateSimpleCity(),
        dialogImageShow: 0,
        pickerOptionLimit:{
          disabledDate: true
        },
        loading: false,
        imgVideoDialogVisible: false,
        dialogDetailVisible: false,
        materialsDialogVisible: false,
        detailDialogVisible: false,
        summaryDialogVisible: false,
        sampleDialogVisible: false,
        campaignDialogVisible: false,
        createTrainDialogVisible: false,
        createSimpleDialogVisible:false,
        trainDialogVisible: false,
        dialogSimpleVisible: false,
        createSaleDialogVisible: false,
        extensionVisible: false,
        createTrainDeptVisible: false,
        materialsCreateVisible: false,
        pushDialogTableVisible: false
      }
    },
    computed:{
      ...mapGetters(["renderOrganization"]),
      treeSolveThis(){
        return treeSolveUpdate(this.renderOrganization)
      },
      stageSaleSet(){
        return this.stageSetLimit.find(v => v.name == "试销")
      }
    },
    components:{
      SaleDetail,
      SimpleAnalyse,
      ElShowMine,
      PushDialog
    },
    mounted(){
      this.obtainStateInitParam()
      let { productId } = this.$route.params
      this.productIdSet = productId
      opreate.getStageByProductId({ productId: productId }).then(res => {
        this.stageSetLimit = res.data ||[]
      })
      opreate.getProdRhythmPlan({ productId }).then(res => {
        let dataSet = res.data || []
        if(dataSet.length > 0){
          let { activityId, stageName } = dataSet[0]
          this.trialSaleSearch.activityId = activityId
          this.infoShowContainer = true
          this.cadenceItems = dataSet
          if(['预热','试销'].includes(stageName)){
            this.activeNameSwitch = '试销'
            this.obtainMetaSum(activityId)
            opreate.getProdSimple({ activityId }).then(res => { this.sampleSendData = res.data || [] })
            this.activeShowItem = true
          }else {
            this.activeNameSwitch = '培训'
            opreate.getProdTrain({ activityId }).then(res => { this.trainSendData = res.data || [] })
            opreate.getProdMaterial({ activityId }).then(res => { this.prodMaterial = res.data || [] })
            opreate.getProdExtension({ activityId }).then(res => { this.prodExtension = res.data || [] })
            this.activeShowItem = false
          }
        }else {
          this.$alert('尚未规划活动,请先进行设置', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push({
                name:'rhymePlanDetail',
                params:this.$route.params
              })
            }
          });
        }
      }).catch(err => console.error(err))
    },
    methods:{
      ...mapMutations(["updateRenderOrganization"]),
      getDateString(value) {
        console.log(value);
        if (!value) return ''
        const date = new Date(value);
        let [yyyy,mm,dd] = [date.getFullYear(),date.getMonth()+1,date.getDate()]
        mm = mm<10?'0'+mm:mm;
        dd = dd<10?'0'+dd:dd;
        return `${yyyy}年${mm}月${dd}日`
      },
      obtainStateInitParam(){
        districtDeploySolve({"region": "", "province":""},res => {
          this.memorSetSearch = res || {}
        })
        districtSolve({"region": "","province":""},res=>{
          this.createDistrict = res || { region: [], province:[], city: [] }
        })
        opreate.getEmpSaleAll({ name: '' }).then(res => {
          this.empSimpleAllInfo = res.data || []
        })
        opreate.getChannelCity({}).then(res => {
          this.cityItems = res.data || []
        })
      },
      obtainSaleCol(trialSaleSearch){
        opreate.getSaleDetail(trialSaleSearch).then(res => {
          this.memorandumSale = res.data || []
        })
      },
      setRegionChange(region){
        districtDeploySolve({ region },fn => {
          if(fn){
            this.memorSetSearch = Object.assign(this.memorSetSearch,{ province: fn.province, city: fn.city })
            this.trialSaleSearch = Object.assign(this.trialSaleSearch,{ province: '全部', city: '全部', status: '全部' })
          }
        })
      },
      setProvinceChange(province){
        opreate.getSaleCity({ province }).then(res => {
          if(res.data){
            this.memorSetSearch = Object.assign(this.memorSetSearch,{ city: ['全部',...res.data] })
            this.trialSaleSearch = Object.assign(this.trialSaleSearch,{ city: '全部', status: '全部' })
          }
        }).catch(err => console.error(err))
      },
      setCityChange(city){
        Object.assign(this.trialSaleSearch,{ status: '全部' })
      },
      createSaleDetail(){
        if(this.stageSaleSet){
          let { startTime, endTime } = this.stageSaleSet
          this.pickerOptionLimit.disabledDate = function(time) {
            return time.getTime() < new Date(startTime).getTime() || time.getTime() > new Date(endTime).getTime()
          }
          this.createParamSale =  new CreateParamSale()
          this.createSaleDialogVisible = true
        }else {
          this.$message.error('请先进行试销阶段设置')
        }
      },
      createSaleBody(createParamSale){
        const submitSet = { productId: this.productIdSet,activityId: this.trialSaleSearch.activityId }
        if(Object.keys(createParamSale).some((v) => createParamSale[v] == '')){
          this.$message.error('请填写完整信息')
          return
        }else {
          opreate.saveTrialSalePoint(Object.assign(createParamSale,submitSet,{startTime:createParamSale.createParamTime[0], endTime:createParamSale.createParamTime[1]})).then(res => {
            if(200 == res.code && res.data >= 1){
              this.$message.success('试销点添加成功')
              this.obtainSaleCol(this.trialSaleSearch)
              districtDeploySolve(this.trialSaleSearch,(res) => {
                this.memorSetSearch = res
              })
            }else {
              this.$message.error('错了哦，请稍后再试')
            }
            this.createSaleDialogVisible = false
          }).catch(err => {
            this.$message.error('错了哦，请稍后再试')
          })
        }
      },
      mineActiveSwitch(item){
        let { activityId, stageName } = item
        this.trialSaleSearch.activityId = activityId
        if(['预热','试销'].includes(stageName)){
          this.activeNameSwitch = '试销'
          this.obtainMetaSum(activityId)
          opreate.getProdSimple({ activityId }).then(res => { this.sampleSendData = res.data || [] })
          this.activeShowItem = true
        }else {
          this.activeNameSwitch = '培训'
          opreate.getProdTrain({ activityId }).then(res => {
            this.trainSendData = res.data || [] })
          opreate.getProdMaterial({ activityId }).then(res => { this.prodMaterial = res.data || [] })
          opreate.getProdExtension({ activityId }).then(res => { this.prodExtension = res.data || [] })
          this.activeShowItem = false
        }
      },
      obtainMetaSum(activityId){
        opreate.getProdAnalyse({activityId, productId: this.productIdSet }).then(res => {
          if(res.code == 200){
            res.data.kpiList.map((item) => {
              if(item.kpiName === '销售量') {
                item.colorName = '#9C96E7';
              } else {
                item.colorName = '#3FCCE1';
              }
            })
            console.log('res',res.data);
            this.saleThisMeta = res.data || { activitySummary: {}, buyingcCrowdsAnalysList: [], feedbackNumList: [], tTrialSalePointData: [] }
          }else {
            this.saleThisMeta = { activitySummary: {}, buyingcCrowdsAnalysList: [], feedbackNumList: [], tTrialSalePointData: [] }
          }
        }).catch(err => console.error(err))
      },
      remoteMethod(query) {
        if (query) {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.leadOfficialSet = this.empSimpleAllInfo.filter(item => {
              return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.leadOfficialSet = [];
        }
      },
      saveSimpleSale(simpleSale){
        if('' == simpleSale.sampleName){
          this.$message.error('请输入标题名称')
          return
        }
        if('' == simpleSale.userLiable){
          this.$message.error('请选择责任人')
          return
        }
        let { activityId } = this.trialSaleSearch
        opreate.saveTSampleSend(Object.assign(simpleSale,{ activityId })).then(res => {
          if(res.data >= 1){
            this.$message.success('出样添加成功')
            opreate.getProdSimple({ activityId }).then(res => {
              this.sampleSendData = res.data || []
            })
          }else{
            this.$message.error('错了哦，请稍后再试')
          }
          this.createSimpleDialogVisible = false
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
          this.createSimpleDialogVisible = false
        })
      },
      changeDisrictRegion(region){
        opreate.getChannelProvince({ region }).then(res => {
          return res.data || []
        }).then(provinces => {
          opreate.getChannelCity({ province: provinces[0] || "unFind" }).then((citySet) => {
            Object.assign(this.createDistrict,{ province: provinces,city: citySet.data })
            Object.assign(this.createParamSale, { province: provinces[0] || '', city: citySet.data[0] || '' })
          })
        })
      },
      changeDisrictProv(province){
        opreate.getChannelCity({ province }).then(citySet => {
          Object.assign(this.createDistrict,{ city: citySet.data })
          Object.assign(this.createParamSale, { city: citySet.data[0] || '' })
        })
      },
      createExtensionVisible(){
        this.extenSendTitle =  '新的活动'
        this.extensionData = new CreateExtension()
        this.extensionVisible = true
      },
      handleCampaignClick(rowSet){
        this.getExtDetail = rowSet
        this.campaignDialogVisible = true
      },
      handleCampaignEdit(rowSet){
        this.extenSendTitle =  '编辑活动'
        this.extensionData = rowSet
        this.extensionVisible = true
      },
      handleSimpleDetail(row){
        let { sampleSendId } = row
        opreate.getSampleCity({ sampleSendId }).then(res => {
          this.simpleDetail = res.data || []
          this.sampleDialogVisible = true
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      handleSimpleDelete(sampleSendId, $index, sampleSendData){
        opreate.deleteSimpleSend({ sampleSendId }).then(res => {
          if(res.data >= 1){
            this.$message.success('物料删除成功')
            sampleSendData.splice($index, 1)
          }else {
            this.$message.error('错了哦，请稍后再试')
          }
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      createTrainToDept(){
        this.noteInfo = { activeSetDept: '', noteInfoText: '' }
        this.$refs.deptRefSet ? this.$refs.deptRefSet.setCheckedKeys([]) : ''
        this.createTrainDeptVisible = true
      },
      deptRefChange(newVal){
        let { id } = newVal
        if(id == this.noteInfo.activeSetDept){
          this.noteInfo.activeSetDept = ''
          this.$refs.deptRefSet.setCheckedKeys([])
        }else {
          this.noteInfo.activeSetDept = id
          this.$refs.deptRefSet.setCheckedKeys([id])
        }
      },
      sureTrainToDept(){
        if('' == this.noteInfo.activeSetDept){
          this.$message.error('错了哦，请选择部门')
          return
        }
        if('' == this.noteInfo.noteInfoText){
          this.$message.error('错了哦，请输入备注信息')
          return
        }
        let { label } = this.treeSolveThis.find(v => v.id == this.noteInfo.activeSetDept)
        this.trainSetParam.tTrainDepartmentData.push({
          trainDepartment: label,
          trainNote: this.noteInfo.noteInfoText
        })
        this.createTrainDeptVisible = false
        this.$refs.deptRefSet.setCheckedKeys([])
      },
      createTimeAndPerson(personParam){
        this.trainSetParam.tTrainDetailData.push(personParam)
      },
      handleToMaterialDetail(row){
        let { informationTitle, fileData } = row
        if(fileData.length > 0){
          let H5Set = fileData.find(v => v.fileType == 2)
          let tempRest = fileData.filter(v => v.fileType != 2)
          let fileDataSet = tempRest.map(v => { return { name:v.thumbnail, url: v.fileUrl, type: v.fileType }})
          this.materialDetail = {
            informationTitle: informationTitle,
            siteUrl: H5Set ? H5Set.fileUrl : '',
            fileData: fileDataSet.length > 0 ? fileDataSet : null
          }
          this.materialsDialogVisible = true
        }else {
          this.materialDetail = {
            informationTitle: informationTitle,
            siteUrl: '',
            fileData: null
          }
          this.materialsDialogVisible = true
        }
      },
      handleToMaterialEdit(row){
        this.sendMaterTitle =  '编辑营销物料'
        let { informationTitle, fileData, informationId } = row
        this.materialSend = { informationId, informationTitle, fileData: [] }
        if(fileData){
          let H5SetTem = fileData.find(v => v.fileType == 2)
          let tempRest = fileData.filter(v => v.fileType != 2)
          this.fileUploadList = tempRest.map(v => {
            return { name:v.thumbnail, url: "1" == v.fileType ? this.showVideo : v.fileUrl, type: v.fileType, fileId: v.fileId, showUrl: v.fileUrl }
          })
          this.materialSend = { ...this.materialSend, siteUrl: H5SetTem ? H5SetTem.fileUrl : '', H5SetTem: H5SetTem }
          this.materialsCreateVisible = true
        }else {
          this.materialSend = { ...this.materialSend, siteUrl: '' }
          this.fileUploadList = []
          this.materialsCreateVisible = true
        }
      },
      handleToMaterialDelete(informationId, $index, prodMaterial){
        opreate.deleteMaterSend({ informationId }).then(res => {
          if(res.data >= 1){
            this.$message.success('物料删除成功')
            prodMaterial.splice($index, 1)
          }else {
            this.$message.error('错了哦，请稍后再试')
          }
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      handleSummatyClick(trialSalePointId){
        opreate.saveOrEditSale({ trialSalePointId }).then(res => {
          this.salePointSummary = res.data || {}
          this.summaryDialogVisible = true
        }).catch(err => console.error(err))
      },
      handleSaleDelete(trialSalePointId, index, saleSet){
        opreate.deleteSalePointById({ trialSalePointId }).then(res => {
          if(res.data == "success"){
            this.$message.success('成功删除一条数据')
            saleSet.splice(index, 1)
          }else {
            this.$message.error('错了哦，请稍后再试')
          }
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      handleToDatailClick(rowSet){
        this.trialSalePointParam = rowSet
        this.detailDialogVisible = true
      },
      handleToPushClick(rowSet){
        this.salePointInfoSet = rowSet
        this.pushDialogTableVisible = true
      },
      handleRemoveBefore(file, fileList){
        let { fileId } = file
        if(fileId){
          let isDelete = opreate.deleteUrlSend({ fileId }).then(res => {
            let flagSet = res.data == 1 ? true : false
            if(flagSet){
            }else {
              this.$message.error('错了哦，请稍后再试')
            }
            return flagSet
          })
          return isDelete
        }else {
          return true
        }
      },
      handleRemoveFile(file, fileList) {
        this.$message.success('删除成功')
      },
      resoureRemoveBefore(file, fileList){
        let { coursewareId } = file
        if(coursewareId){
          let isDelete = opreate.deleteCourseSend({ coursewareId }).then(res => {
            let flagSet = res.data >= 1 ? true : false
            if(flagSet){
            }else {
              this.$message.error('错了哦，请稍后再试')
            }
            return flagSet
          })
          return isDelete
        }else {
          return true
        }
      },
      handleResoureRemoveFile(file, fileList){
        this.$message.success('删除成功')
      },
      handleSuccessThis(res, file,fileList){
        let { name, raw } = file
        "1" == isTrueReg(raw.type) ? file.url = this.showVideo : ''
        let { fileUrl } = res
        if(fileUrl){
          this.materialSend.fileData.push({ fileUrl, thumbnail: name, fileType: isTrueReg(raw.type) })
        }else{
          this.$message.error('错了哦，上传失败')
        }
      },
      handlePictureCardPreview(file) {
        if(file.fileId){
          this.dialogImageShow = '1' == file.type ? true : false
          this.dialogImageUrl = file.showUrl
        }else {
          let { raw, response } = file
          if(raw){
            this.dialogImageShow = '1' == isTrueReg(raw.type) ? true : false
            this.dialogImageUrl = response.fileUrl
          }
        }
        this.imgVideoDialogVisible = true
      },
      handleCargPreview(file){
        this.dialogImageShow = file.type
        this.dialogImageUrl = file.url
        this.dialogDetailVisible = true
      },
      handleSuccessVideo(res, file){
        let { fileUrl } = res
        if(fileUrl){
          this.trainSetParam.tTrainCoursewareData.push({ coursewareUrl: fileUrl, coursewareName: file.name, coursewareType: 1 })
        }else{
          this.$message.error('错了哦，上传失败')
        }
      },
      handleSuccessWord(res, file){
        let { fileUrl } = res
        if(fileUrl){
          this.trainSetParam.tTrainCoursewareData.push({ coursewareUrl: fileUrl, coursewareName: file.name, coursewareType: 0 })
        }else{
          this.$message.error('错了哦，上传失败')
        }
      },
      handleVideoPreview(file){

      },
      handleWordPreview(file){

      },
      handleToTrainDetail(row){
        let { tTrainCoursewareData, tTrainDepartmentData, tTrainDetailData, trainTarget, trainTheme } = row
        let videoFileList = tTrainCoursewareData.filter(v => v.coursewareType == 1).map(v => {
          return { name: v.coursewareName, url: v.coursewareUrl, coursewareId: v.coursewareId }
        })
        let wordFileList = tTrainCoursewareData.filter(v => v.coursewareType == 0).map(v => {
          return { name: v.coursewareName, url: v.coursewareUrl, coursewareId: v.coursewareId }
        })
        this.trainDetailSend = { videoFileList, wordFileList, tTrainDepartmentData, tTrainDetailData, trainTarget, trainTheme }
        this.trainDialogVisible = true
      },
      handleToTrainEdit(row){
        this.trainSendTitle = '编辑培训活动'
        let { tTrainCoursewareData, tTrainDepartmentData, tTrainDetailData, trainTarget, trainTheme, trainId } = row
        let videoFileList = tTrainCoursewareData.filter(v => v.coursewareType == 1).map(v => {
          return { name: v.coursewareName, url: v.coursewareUrl, coursewareId: v.coursewareId }
        })
        let wordFileList = tTrainCoursewareData.filter(v => v.coursewareType == 0).map(v => {
          return { name: v.coursewareName, url: v.coursewareUrl, coursewareId: v.coursewareId }
        })
        this.trainSetParam = {  videoFileList, wordFileList, tTrainDepartmentData, tTrainDetailData, trainTarget, trainTheme, trainId, tTrainCoursewareData: [] }
        this.createTrainDialogVisible = true
      },
      handleToTrainDelete(trainId, $index, trainSendData){
        opreate.deleteTrainSend({ trainId }).then(res => {
          if(res.data >= 1){
            this.$message.success('培训删除成功')
            trainSendData.splice($index, 1)
          }else {
            this.$message.error('错了哦，请稍后再试')
          }
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      updateTrainSet(trainSetParam){
        let { trainTarget, trainTheme, tTrainDetailData } = trainSetParam
        if(trainTheme == ''){
          this.$message.error('请输入培训主题')
          return
        }
        if(trainTarget == ''){
          this.$message.error('请输入培训目标')
          return
        }
        let { activityId } = this.trialSaleSearch
        tTrainDetailData = tTrainDetailData.filter(v => (v.startTime != '' || v.projectName != '' || v.userLiable != ''))
        opreate.updateTrainSend(Object.assign(trainSetParam,{ activityId , tTrainDetailData })).then(res => {
          if(res.data >= 1){
            this.$message.success('培训活动保存成功')
          }else {
            this.$message.error('错了哦，请稍后再试')
          }
          this.createTrainDialogVisible = false
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      updateMaterSend(materialSend){
        let { informationTitle, informationId } = materialSend
        if(informationTitle){
          let { productId } = this.$route.params
          let msgSendShow = informationId ? '物料编辑成功' : '物料添加成功'
          let { activityId } = this.trialSaleSearch
          let H5SetTem = materialSend.H5SetTem || {}
          if(materialSend.siteUrl){
            let H5Set = materialSend.fileData.find(v => v.fileType == 2)
            H5Set ? H5Set.fileUrl = materialSend.siteUrl : materialSend.fileData.push({ fileUrl: materialSend.siteUrl, thumbnail: 'H5', fileType: 2, fileId: H5SetTem.fileId })
          }else {
            materialSend.fileData = materialSend.fileData.filter(v => v.fileType != 2)
          }
          opreate.updateProdPlanInfo(Object.assign(materialSend,{ productId, activityId })).then(res => {
            if(res.data >= 1){
              this.$message.success(msgSendShow)
              opreate.getProdMaterial({ activityId }).then(res => { this.prodMaterial = res.data || [] })
            }else {
              this.$message.error('错了哦，请稍后再试')
            }
            this.materialsCreateVisible = false
          }).catch(err => {
            this.$message.error('错了哦，请稍后再试')
          })
        }else {
          this.$message.error('请填写营销物料标题')
        }
      },
      createCitySimpleThis(sampleSendId){
        this.sendCityTitle = '添加新的城市'
        this.createCitySimple = Object.assign((new CreateSimpleCity()),{ sampleSendId })
        this.dialogSimpleVisible = true
      },
      createSimpleSet(){
        this.simpleSaleSet = { sampleName: '', userLiable: '' }
        this.createSimpleDialogVisible = true
      },
      createTrainSet(){
        this.trainSendTitle = '新的培训活动'
        this.trainSetParam = { trainTheme: '', trainTarget: '', tTrainDepartmentData: [], tTrainDetailData: [], tTrainCoursewareData: [], videoFileList: [], wordFileList: [] }
        this.createTrainDialogVisible = true
      },
      saveExtensionSale(extenSet){
        let { activityId } = this.trialSaleSearch
        let { extensionId, extensionName, extensionDescription, extensionPoint, tExtensionScheduleList, tExtensionFormList } = extenSet
        let msgShow = extensionId ? '活动编辑成功' : '活动添加成功'
        tExtensionScheduleList = tExtensionScheduleList.filter(v => v.description != '' || v.extensionDate != '')
        tExtensionFormList = tExtensionFormList.filter(v => v.form != '')
        if(!extensionName){
          this.$message.error('请填写活动名称')
          return
        }
        if(!extensionDescription){
          this.$message.error('请填写活动概述')
          return
        }
        if(!extensionPoint){
          this.$message.error('请填写活动地点')
          return
        }
        let extenParam = { extensionId, extensionName, extensionDescription, extensionPoint, tExtensionScheduleList, tExtensionFormList }
        opreate.updateTExtension(Object.assign(extenParam,{ activityId })).then(res => {
          if(res.data >= 1){
            this.$message.success(msgShow)
            opreate.getProdExtension({ activityId }).then(res => { this.prodExtension = res.data || [] })
          }else {
            this.$message.error('错了哦，请稍后再试')
          }
          this.extensionVisible = false
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      createExtSchedule(schedule){
        this.extensionData.tExtensionScheduleList.push(schedule)
      },
      createExtForm(formSet){
        this.extensionData.tExtensionFormList.push(formSet)
      },
      handleCampaignDelete(extensionId,$index,prodExtension){
        opreate.delExtData({ extensionId }).then(res => {
          if(res.data >= 1){
            this.$message.success('活动删除成功')
            prodExtension.splice($index, 1)
          }else {
            this.$message.error('错了哦，请稍后再试')
          }
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      delTrainInfo(row, $index, tTrainDetailData){
        let { id } = row
        if(id){
          opreate.deleteDetailSend({ id }).then(res => {
            if(res.data >= 1){
              this.$message.success('删除成功')
              tTrainDetailData.splice($index,1)
            }else {
              this.$message.error('错了哦，请稍后再试')
            }
          }).catch(err => {
            this.$message.error('错了哦，请稍后再试')
          })
        }else {
          tTrainDetailData.splice($index,1)
        }
      },
      delDeptSetPart(row, $index, tTrainDepartmentData){
        let { id } = row
        if(id){
          opreate.deleteDeptSend({ id }).then(res => {
            if(res.data >= 1){
              this.$message.success('删除成功')
              tTrainDepartmentData.splice($index,1)
            }else {
              this.$message.error('错了哦，请稍后再试')
            }
          }).catch(err => {
            this.$message.error('错了哦，请稍后再试')
          })
        }else {
          tTrainDepartmentData.splice(index,1)
        }
      },
      handleCityDeleteSend(samplePlanId,$index,simpleCity){
        opreate.deleteSendCity({ samplePlanId }).then(res => {
          if(res.data >= 1){
            this.$message.success('城市删除成功')
            simpleCity.splice($index, 1)
          }else {
            this.$message.error('错了哦，请稍后再试')
          }
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      handleCityEditSend(row){
        this.sendCityTitle = '编辑城市'
        this.createCitySimple = row
        this.dialogSimpleVisible = true
      },
      simpleNameEdit(simpleDetail){
        let { activityId, sampleSendId, sampleName } = simpleDetail
        opreate.updateSimpleName({ sampleSendId, sampleName }).then(res => {
          if(res.data >= 1){
            this.$message.success('出样名称修改成功')
            opreate.getProdSimple({ activityId }).then(res => { this.sampleSendData = res.data || [] })
          }else {
            this.$message.error('错了哦，请稍后再试')
          }
        }).catch(err => {
          this.$message.error('错了哦，请稍后再试')
        })
      },
      createTrainBody(trainParam){
        this.createTrainDialogVisible = false
      },
      createPlanCitySet(paramSet){
        this.createCitySimple.tSampleSendPlanData.push(paramSet)
      },
      createCitySimpleSQL(createCitySimple){
        let { city, sampleShopCount, sampleSendId } = createCitySimple
        if(city){
          opreate.updateSendCity(createCitySimple).then(res => {
            if(res.data >= 1){
              this.$message.success('城市添加成功')
              opreate.getSampleCity({ sampleSendId }).then(res => {
                this.simpleDetail = res.data || []
              }).catch(err => {
                console.error('错了哦，请稍后再试')
              })
            }else {
              this.$message.error('错了哦，请稍后再试')
            }
            this.dialogSimpleVisible = false
          }).catch(err => {
            this.$message.error('错了哦，请稍后再试')
          })
        }else {
          this.$message.error('请选择城市')
        }
      },
      createMaterialSet(){
        this.sendMaterTitle =  '添加营销物料'
        this.materialSend = { informationTitle: '', siteUrl: '', fileData: [] }
        this.materialsCreateVisible = true
      }
    },
    watch:{
      materialsCreateVisible(newVal){
        if(newVal == false){
          const { activityId } = this.trialSaleSearch
          this.$refs.uploadSetMine ? this.$refs.uploadSetMine.clearFiles() : ''
          opreate.getProdMaterial({ activityId }).then(res => { this.prodMaterial = res.data || [] })
        }
      },
      trialSaleSearch:{
        deep: true,
        handler(newVal){
          this.obtainSaleCol(newVal)
        }
      },
      activeNameSwitch(newVal){
        const { activityId } = this.trialSaleSearch
        switch (newVal){
          case '出样':
            opreate.getProdSimple({ activityId }).then(res => { this.sampleSendData = res.data || [] })
            break;
          case '培训':
            opreate.getProdTrain({ activityId }).then(res => { this.trainSendData = res.data || [] })
            break;
          case '物料':
            opreate.getProdMaterial({ activityId }).then(res => { this.prodMaterial = res.data || [] })
            break;
          case '地推':
            opreate.getProdExtension({ activityId }).then(res => { this.prodExtension = res.data || [] })
            break;
          default:
            opreate.getProdSimple({ activityId }).then(res => { this.sampleSendData = res.data || [] })
            break;
        }
      },
      dialogDetailVisible(newVal){
        if(newVal == false && this.$refs.videoSet){
          if(!this.$refs.videoSet.paused){
            this.$refs.videoSet.pause()
          }
        }
      },
      imgVideoDialogVisible(newVal){
        if(newVal == false && this.$refs.videoSetMine){
          if(!this.$refs.videoSetMine.paused){
            this.$refs.videoSetMine.pause()
          }
        }
      },
      sampleDialogVisible(newVal){
        if(newVal == false){
          const { activityId } = this.trialSaleSearch
          opreate.getProdSimple({ activityId }).then(res => { this.sampleSendData = res.data || [] })
        }
      },
      createTrainDialogVisible(newVal){
        if(newVal == false){
          const { activityId } = this.trialSaleSearch
          opreate.getProdTrain({ activityId }).then(res => { this.trainSendData = res.data || [] })
        }
      }
    }
  }
</script>

<style scoped>
  .plan-detail-container{
    display: flex;
    width: 100%;
  }
  .plan-detail-left{
    display: flex;
    flex: 4;
    width: 30%;
  }
  .plan-detail-right{
    display: flex;
    flex: 11;
    width: 70%;
    justify-content: flex-end;
  }
  .detail-item-container{
    width: 98%;
    display: flex;
    flex-direction: column;
  }
  .left-item-container{
    box-shadow: 0 0 4px #888888;
  }
  .plan-detail-left-container{
    display: flex;
    flex-direction: column;
  }
  .cadence-itemSet{
    display: flex;
    min-height: 80px;
    cursor: pointer;
  }
  .activeSet{
    background: #d5eefe;
    color: #409EFF;
  }
  .cadence-itemSet+ .cadence-itemSet{
    border-top: 1px solid #E0E8EF;
  }
  .cadence-item{
    display: flex;
    justify-content: center;
  }
  .cadence-item-left{
    flex: 2;
    align-items: center;
  }
  .circleNormal{
    display: flex;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .cadence-item-center{
    flex-direction: column;
    flex: 7;
    padding: 12px 0px;
  }
  .cadence-item-right{
    flex: 3;
    align-items: center;
  }
  .newSetContainer{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
  }

  /**
  * @desc: This is Note
  * 试销CSS
  * @author: WJ
  * @date: 2018/10/23 17:16:29
  */
  .memorandumSaleItem{
    display: flex;
    flex-direction: column;
  }
  .memorandumSaleDatail{
    display: flex;
    flex-direction: column;
    /*margin-top: 6px;
    border-top: 1px solid #EFE0E8;*/
    padding-top: 4px;
  }
  .mineSetForm{
    margin: 6px 0;
  }
  .memorandumSaleAnalysis{
    padding-top: 10px;
  }
  .saleAnalysisItem+ .saleAnalysisItem{
    margin-top: 12px;
  }

  /**
  * @desc: This is Note
  * 新建试销CSS
  * @author: WJ
  * @date: 2018/11/07 19:23:55
  **/
  .sale-dialog-container{
    display: flex;
    flex-direction: column;
  }
  .createSaleBody{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .createSaleFooter{
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }
  .createSaleButton{
    display: flex;
    justify-content: space-between;
    width: 40%;
  }
  .createSaleItem{
    margin: 4px 0px;
  }
  .descLleft{
    width: 80px;
    padding-right: 12px;
    display: flex;
    justify-content: flex-end;
  }
  .paramRight{
    display: flex;
    flex: 1;
  }
  .saleMineSet{
    display: flex;
    flex-direction: column;
  }
  .saleMineItemSet{
    margin-bottom: 12px;
  }

    /**
    * @desc: This is Note
    * 查看总结CSS
    * @author: coulis
    * @date: 2018/10/31 16:30:19
    */
  .summary-dialog-content{
    display: flex;
    flex-direction: column;
  }
  .summaryLeft{
    width: 80px;
    text-align: right;
    margin-right: 12px;
  }
  .summaryContainer{
    display: flex;
  }
  .summaryRight{
    flex: 1;
  }
  .titleHeader{
    font-weight: bold;
  }

  /**
  * @desc: This is Note
  * 添加出样CSS
  * @author: WJ
  * @date: 2018/11/05 20:19:14
  **/
  .createSimpleItem{
    display: flex;
    flex-direction: column;
  }
  .createSimple-dialog-footer{
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }

  /**
  * @desc: This is Note
  * 出样详情CSS
  * @author: coulis
  * @date: 2018/10/31 18:40:13
  */
  .sample-dialog-content{
    display: flex;
    flex-direction: column;
    font-weight: bold;
    color: #333;
  }
  .sample-dialog-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .sample-headerTitle{
    display: flex;
  }
  .mineIconSet{
    padding: 0 10px;
    display: flex;
    align-items: center;
  }
  .mineIconSet i{
    cursor: pointer;
    margin: 0 6px;
    font-size: 20px;
    color: #409EFF;
  }

  /**
  * @desc: This is Note
  * 添加城市CSS
  * @author: WJ
  * @date: 2018/11/10 16:44:08
  **/
  .createCitySimple{
    display: flex;
    flex-direction: column;
  }
  .createCitySimpleItem{
    display: flex;
    min-height: 40px;
    align-items: center;
  }
  .citySimpleLeft{
    width: 112px;
    padding-right: 12px;
  }
  .tSampleSendPlan{
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
  }
  .createCityFooter{
    display: flex;
    justify-content: center;
  }
  .cityFooter{
    margin-top: 12px;
    width: 50%;
    justify-content: space-between;
  }

  /**
  * @desc: This is Note
  * 培训创建CSS
  * @author: WJ
  * @date: 2018/11/12 10:37:47
  **/
  .createTrain-dialog-content{
    display: flex;
    flex-direction: column;
    line-height: 35px;
  }
  .createTrainFooter{
    display: flex;
    justify-content: center;
  }
  .createTrain-item-content{
    display: flex;
    flex-direction: column;
  }
  .trainBascInfo{
    display: flex;
    flex-direction: column;
  }
  .bascInfoItemLeft{
    width: 92px;
    padding-right: 12px;
    font-weight: bold;
  }
  .bascInfoItemRight{
    flex: 1;
  }
  .trainBascInfoItem{
    display: flex;
  }
  .deptSetContainer{

  }
  .deptSetItemContainer{
    display: flex;
  }
  .deptSetItemContainer+ .deptSetItemContainer{
    border-top: 1px solid #E0E8EF;
  }
  .deptSetItemPart{
    display: flex;
  }
  .trainInfoContainer{
    display: flex;
    flex-direction: column;
  }
  .titleHeaderItem{
    display: flex;
    justify-content: center;
  }
  .trainInfoContentItem+ .trainInfoContentItem{
    border-top: 1px solid #E0E8EF;
  }
  .setCourseHeader{
    display: flex;
    height: 40px;
    background: #E0E8EF;
    width: 100%;
  }
  .setCourseBody{
    display: flex;
    width: 100%;
  }
  .courseHeaderItem{
    display: flex;
    align-items: center;
  }
  .setCourseHeader .courseHeaderItem{
    justify-content: center;
  }
  .setCourseBody .courseHeaderItem{
    padding: 12px;
    background: white;
    flex-direction: column;
  }
  .setCourseBody .courseHeaderItem+ .courseHeaderItem{
    border-left: 1px solid #E0E8EF;
  }
  .sourceItem{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .sourceItem img{
    width: 20px;
    height: 20px;
    position: relative;
    top: -3px;
  }
  .sourceItem a{
    word-wrap: break-word;
    word-break: break-all;
    color :green;
  }
  .titleHeaderHandler{
    display: flex;
    flex: 1;
    max-width: 10%;
    justify-content: center;
  }
  .contentItem{
    padding: 0 6px;
    display: flex;
    align-items: center;
  }
  .contentItemHandler{
    display: flex;
    flex: 1;
    max-width: 10%;
    justify-content: center;
    align-items: center;
  }

  .createDept-dialog-footer{
    display: flex;
    justify-content: center;
    padding-top: 12px;
  }
  .createDeptNote{
    display: flex;
    flex-direction: column;
  }


  /**
  * @desc: This is Note
  * 培训详情
  * @author: WJ
  * @date: 2018/11/05 16:40:03
  **/
  .train-dialog-content{
    display: flex;
    flex-direction: column;
  }
  .train-dialog-item{
    display: flex;
    flex-direction: column;
  }
  .train-header-item{
    display: flex;
  }
  .train-header-itemLeft{
    margin-right: 12px;
    width: 62px;
    font-weight: bold;
  }
  .train-header-itemRight{
    font-weight: bold;
  }
  .trainDeptSet{
    display: flex;
    flex-direction: column;
  }
  .trainDetailHeader{
    display: flex;
    background: #E0E8EF;
    height: 40px;
    align-items: center;
  }
  .tTrainDetailItem{
    display: flex;
    background: white;
    line-height: 40px;
  }
  .tTrainDetailItem+ .tTrainDetailItem{
    border-top: 1px solid #E0E8EF;
  }
  .titleSetItem{
    display: flex;
    justify-content: center;
    font-weight:bold;
  }


  /**
  * @desc: This is Note
  * 营销物料详情CSS
  * @author: WJ
  * @date: 2018/11/05 10:36:59
  **/
  .materials-dialog-content{
    display: flex;
    flex-direction: column;
  }
  .textLeft{
    margin-right: 12px;
    font-weight: bold;
  }
  .widthSet{
    flex: 1;
    display: flex;
  }

  /**
  * @desc: This is Note
  * 添加营销物料CSS
  * @author: WJ
  * @date: 2018/11/13 11:10:11
  **/
  .uploadResource{
    display: flex;
    flex-direction: column;
    margin: 8px 0;
  }
  .h5Rource{
    display: flex;
    flex-direction: column;
  }
  .materialsCreateFooter{
    display: flex;
    justify-content: center;
    padding-top: 12px;
  }

  /**
  * @desc: This is Note
  * 活动(地推)CSS
  * @author: coulis
  * @date: 2018/10/31 20:00:24
  */
  .campaign-dialog-content{
    display: flex;
    flex-direction: column;
  }
  .campaign-content{
    display: flex;
    flex-direction: column;
  }
  .campaign-content-item{
    display: flex;
  }
  .campaigTitleLeft{
    margin-right: 12px;
  }
  .campaign-footer{
    display: flex;
    justify-content: center;
  }
  .campaigTitleRight{
    display: flex;
  }
  .editSetContainer{
    margin-left: 12px;
    cursor: pointer;
  }
  .editSet{
    width: 18px;
    height: 18px;
  }

  /**
  * @desc: This is Note
  * 地推Dialog新建
  * @author: WJ
  * @date: 2018/11/09 11:33:25
  **/
  .campaign-create-container{
    display: flex;
    flex-direction: column;
  }
  .campaign-create-item{
    display: flex;
    flex-direction: column;
  }
  .campaign-create-footer{
    margin-top: 12px;
    display: flex;
    justify-content: center;
  }
  .tExtensionSchHeader,.tExtensionFormHeader{
    display: flex;
  }
  .campaign-create-container .el-icon-plus{
    color: #409eff;
    font-size: 16px;
    cursor: pointer;
  }
  .tExtensionSchedule{
    display: flex;
  }
  .tExtensionSchedule+ .tExtensionSchedule{
    margin-top: 6px;
  }
  .tExtensionSchItem{
    display: flex;
    flex: 1;
  }
  .train-rest-item{
    font-weight: bold;
  }
</style>
